<template>
  <div class="bottom-bar">  
     <div class="check-botton">
       <check-button :is-checked="isSelectAll" @click.native="clickSelectAll"></check-button>
       <span>全选</span>
     </div>
     <div class="calcPrice">
       合计: ￥{{totalPrice}}
     </div>
     <div class="settlement">
       <span @click="calcClick">去结算({{selectNumber}})</span>
     </div>
  </div>
</template>

<script>
  import CheckButton from './CheckButton.vue'

  export default {
    name:"CartBottomBar",
    computed:{
      totalPrice(){//计算总价格的高阶函数方法
        return this.$store.getters.cartList.filter(item => {
          return item.checked && item.price
        }).reduce((preValue,item) => {//累加器经常用于计算购物车总价格
          return preValue + item.price * item.count
        },0).toFixed(2)
      },
      selectNumber(){//计算选中的商品
        return this.$store.getters.cartList.filter(item => item.checked && item.price).length
      },
      isSelectAll(){//决定全选按钮是否显示
        return this.$store.state.cartList.length === this.selectNumber && this.$store.state.cartList.length !== 0
      }
    },
    methods: {
      clickSelectAll(){//控制全选按钮状态
        if(this.isSelectAll){
          this.$store.commit('changeChecked',false)
        }else {
          this.$store.commit('changeChecked',true)
        }
      },
      calcClick(){
        if(!this.isSelectAll){
          this.$toast.show('请选择要购买的商品')
        }
      }
    },
    components:{
      CheckButton
    }
  }
</script>

<style scoped>
  .bottom-bar {
    display: flex;
    height: 44px;
    background-color: #eee;
  }
  .check-botton {
    width: 33.33%;
    display: flex;
    height: 100%;
    align-items: center;
    margin-left: 8px;
  }

  .check-botton span {
    margin-left: 8px;
    color: #333;
    font-weight: 550;
    font-size: 16px;
    margin-top: 3px;
  }

  .calcPrice {
    width: 33.33%;
    height: 100%;
    line-height: 44px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
  }

  .settlement {
    width: 33.33%;
    height: 100%;
    line-height: 44px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    padding-left: 20px;
    text-align: center;
  }

  .settlement span {
    display: block;
    height: 100%;
    width: 100%;
    background-color: #fc4300;
  }
</style>